import React, { useState, useCallback,useEffect } from "react";
import PropTypes from "prop-types";
import Modal from "antd/lib/modal";
import Checkbox from "antd/lib/checkbox";
import Input from "antd/lib/input";
import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
import notification from "@/services/notification";

function AddVideoDialog({ dialog, dashboard, widget }) {
  const [widgetOptions, setWidgetOptions] = useState({
    type:'video',
    auto_controls: true,
    auto_play: false,
    auto_loop: false,
    auto_preload: true,
    auto_muted: false,
  });

  useEffect(() => {
    if (widget.options) {
      if (widget.options.widgetOptions) {setWidgetOptions(widget.options.widgetOptions);}
    }
  },[widget]);

  function processChange(key, value) {
    let ps = {...widgetOptions}
    ps[key] = value

    setWidgetOptions(ps);
  }

  const saveWidget = useCallback(() => {
    if (widgetOptions.hasOwnProperty("url")) {
      dialog.close({ widgetOptions }).catch(() => {
        notification.error("视频部件未能添加！");
      });
    } else {
      notification.error("视频地址不能为空！");
    }
  }, [dialog, widgetOptions]);

  return (
    <Modal
      {...dialog.props}
      maskClosable = {false}
      title={Object.getOwnPropertyNames(widget).length === 0 ? "添加视频" : "编辑视频：" + widget.id}
      onOk={saveWidget}
      okButtonProps={{
        ...dialog.props.okButtonProps,
        disabled: dialog.props.okButtonProps.disabled,
      }}
      okText={Object.getOwnPropertyNames(widget).length === 0 ? "添加至报表" : "确定"}
      cancelText="取消"
      width={700}
    >
      <div data-test="AddWidgetDialog">
      视频来源地址：
        <Input type="text" style={{width:300}}
          value={(widgetOptions && widgetOptions.url) || ""}
          onChange={e => processChange("url", e.target.value)}
        />
        (支持url取数函数)<a href="https://www.dazdata.com/docs/college/markdown/3.html" target="_blank" rel="noopener noreferrer">官网指南</a>
        <br/>
        例：https://www.dazdata.com&#63;id=&#123;&#123;&quot;parameter&quot;:&quot;id&quot;&#125;&#125;
      </div>  
      <div>
        部件个性标题：
        <Input type="text" style={{width:300}}
          value={(widgetOptions && widgetOptions.widget_title) || ""}
          title="支持HTML5语法"
          onChange={e => processChange("widget_title", e.target.value)}
        />
        (支持url取数函数)同上
        &nbsp;&nbsp;
        <Checkbox
          name="title_center"
          checked={widgetOptions && widgetOptions.title_center}
          onChange={e => processChange("title_center", e.target.checked)}>
          部件标题居中
        </Checkbox>  
      </div>  
      <div>
        <br/>
        背景图片：
        <Input type="text" style={{width:300}}
          value={(widgetOptions && widgetOptions.poster_url) || ""}
          onChange={e => processChange("poster_url", e.target.value)}
        />
      </div>  
      <div>
        <br/>
        <Checkbox
          name="auto_controls"
          checked={widgetOptions && widgetOptions.auto_controls}
          onChange={e => processChange("auto_controls", e.target.checked)}>
          显示进度条
        </Checkbox>  
        <Checkbox
          name="auto_play"
          checked={widgetOptions && widgetOptions.auto_play}
          onChange={e => processChange("auto_play", e.target.checked)}>
          自动播放
        </Checkbox>  
        <Checkbox
          name="auto_loop"
          checked={widgetOptions && widgetOptions.auto_loop}
          onChange={e => processChange("auto_loop", e.target.checked)}>
          循环播放
        </Checkbox>  
        <Checkbox
          name="auto_preload"
          checked={widgetOptions && widgetOptions.auto_preload}
          onChange={e => processChange("auto_preload", e.target.checked)}>
          自动加载
        </Checkbox>  
        <Checkbox
          name="auto_muted"
          checked={widgetOptions && widgetOptions.auto_muted}
          onChange={e => processChange("auto_muted", e.target.checked)}>
          自动静音
        </Checkbox>  
      </div>
      <div>
        <br/>
        <Checkbox
          name="no_refresh"
          checked={widgetOptions && widgetOptions.no_refresh}
          onChange={e => processChange("no_refresh", e.target.checked)}>
          不随报表自动刷新
        </Checkbox>  
        &nbsp;&nbsp;
        <Checkbox
          name="mainWidget"
          checked={widgetOptions && widgetOptions.mainWidget}
          onChange={e => processChange("mainWidget", e.target.checked)}>
          设置为主部件
        </Checkbox>  
        (Portal模式充满报表背景区)
        <Checkbox
          name="widget_toplayer"
          checked={widgetOptions && widgetOptions.widget_toplayer}
          disabled={widgetOptions && widgetOptions.mainWidget}
          onChange={e => processChange("widget_toplayer", e.target.checked)}>
          置于顶层
        </Checkbox>  
        <Checkbox
          name="widget_nomenu"
          checked={widgetOptions && widgetOptions.widget_nomenu}
          onChange={e => processChange("widget_nomenu", e.target.checked)}>
          禁止菜单(Portal模式)
        </Checkbox>  
      </div>  
      <div>
        <br/>
        使用视频注意事项：<br/>
        1、目前支持视频格式（如：mp4,hls）；<br/>  
        2、背景图使用url（如：https://cdn.*.com/a.png）；<br/>  
        3、如果跨域使用媒体文件，需要配置环境变量（参考安装部署手册）；<br/>  
        <br/>
      </div>
    </Modal>
  );
}

AddVideoDialog.propTypes = {
  dialog: DialogPropType.isRequired,
  widget: PropTypes.object,
};

AddVideoDialog.defaultProps = {
  widget: {},
};

export default wrapDialog(AddVideoDialog);
